终于搞懂Vue开发环境和生产环境的代理配置了

2024-06-19 13:46| 来源: 网络整理| 查看: 265

在vue项目中有两个关键的环境配置文件： .env.development.env.production

一个表示开发环境，一个表示生产环境，建议在项目搭建初期就创建好这两个文件，首先拿开发环境来举例：

开发环境配置： .env.development配置 ENV = 'development' # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http VUE_APP_BASE_API = '/api'

其中VUE_APP_BASE_API是Vue的关键后端请求地址，我们可以在nodejs项目的任意js代码中获取环境变量，例如在创建axios请求实例对象时，通过process.env.“环境变量的KEY”

// 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url timeout: 60000 // 请求超时时间 })

对于开发环境的地址配置我们是可以在vue.config.js中直接配置代理方式的，这里的代理是对请求路径的代理，也就是axios的请求路径（简单点理解就是对路径进行替换），例如以下代码，我们将/api这个路径代理到了target指向的真实的后端地址。但是要注意此处的用法仅限于开发环境，也就是npm run运行的场景，对生产环境是无效的。

devServer: { //这里都是配置开发环境参数 port: 8080, //设置开发环境前端端口选填 proxy: { //设置开发环境代理 '/api': { //设置拦截器拦截器格式斜杠+拦截器名字，名字可以自己定 target: 'http://localhost:8599/api', //代理的目标地址(后端设置的端口号) changeOrigin: true, //是否设置同源，输入是的 pathRewrite: { // 重定向 '^/api': '' } } } } 生产环境配置：

下面介绍生产环境的配置，生产环境其实就是我们通过npm build出来的包，有一个index.html的网页入口。贴一下生产环境的配置：

.env.production配置 ENV = 'production' # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http VUE_APP_BASE_API = 'http://localhost:8599/api'

这里可以看到，基本路径我们写的是完整后端路径，因为生产环境无法使用vue脚手架提供的后端路径代理，所以必须填写真实后端地址。但是我们的生产环境项目一般是结合nginx一起部署的，如果你不想让客户端直接请求真实的后端IP+端口，那么我们也可以通过nginx来做到路径代理，原理和vue.config.js中的一样，只是配置不同，下面带大家配置一下：

env.production代理方式配置 ENV = 'production' # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http VUE_APP_BASE_API = '/api' Nginx配置 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; keepalive_timeout 65; server { listen 80; charset utf-8; server_name localhost; location / { root /usr/share/nginx/html/dist; #指向npm build打出来的包路径 index index.html index.htm; } #/api是vue中配置的代理路径 location /api { proxy_connect_timeout 300; proxy_send_timeout 300; proxy_read_timeout 300; proxy_buffers 8 1M; proxy_busy_buffers_size 1M; proxy_temp_file_write_size 1M; proxy_set_header Host $http_host; proxy_set_header Cookie $http_cookie; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://127.0.0.1:8050/api; //这里填写真实的后端地址 } } }

nginx修改配置后记得执行一下nginx -s reload,配置好后就大功告成了，其作用和配置vue.config.js是一样的。

【本文地址】

公司简介

联系我们